<template>
	<div id="AnalysisManage">
		<div class="analysis-manage-header">
			<div class="analysis-manage-header-title">
				<img src="@/assets/images/logo.png" alt="" />
				<span>数智中台-分析管理</span>
			</div>
			<div class="analysis-manage-header-back" @click="goToVisualization">
				<el-icon><ArrowLeft /></el-icon>
				<span>返回可视化图谱</span>
			</div>
		</div>

		<div class="analysis-manage-container">
			<div class="analysis-manage-menu">
				<el-menu
					mode="vertical"
					:default-active="activeMenu"
					:default-openeds="['KnowledgeAnalysisManage']"
				>
					<el-menu-item index="AnalysisTaskManage" @click="handleMenuClick('AnalysisTaskManage')">
						分析任务管理
					</el-menu-item>
					<el-sub-menu index="KnowledgeAnalysisManage">
						<template #title>知识分析管理</template>
						<el-menu-item
							index="KnowledgeRelationManage"
							@click="handleMenuClick('KnowledgeRelationManage')"
						>
							知识关系管理
						</el-menu-item>
						<el-menu-item index="KnowledgeLibManage" @click="handleMenuClick('KnowledgeLibManage')">
							AI知识库管理
						</el-menu-item>
					</el-sub-menu>
					<el-menu-item index="LibManage" @click="handleMenuClick('LibManage')">
						通用词库管理
					</el-menu-item>
				</el-menu>
			</div>
			<div class="child-analysis-content">
				<div class="child-analysis-scroll-wrapper">
					<router-view></router-view>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ArrowLeft } from '@element-plus/icons-vue';

const router = useRouter();
const route = useRoute();

// 获取当前路由
const activeMenu = ref('AnalysisTaskManage');
const currentRoute = route.name;
if (currentRoute === 'AnalysisTaskManage') {
	activeMenu.value = 'AnalysisTaskManage';
} else if (currentRoute === 'LibManage') {
	activeMenu.value = 'LibManage';
} else if (currentRoute === 'KnowledgeRelationManage') {
	activeMenu.value = 'KnowledgeRelationManage';
} else if (currentRoute === 'KnowledgeLibManage') {
	activeMenu.value = 'KnowledgeLibManage';
}

// 监听路由变化，更新激活菜单
watch(
	() => route.name,
	(newRouteName) => {
		if (newRouteName) {
			activeMenu.value = newRouteName as string;
		}
	}
);

// 菜单点击
function handleMenuClick(menuName: string) {
	activeMenu.value = menuName;
	router.push({
		name: menuName
	});
}

// 返回可视化图谱模块
function goToVisualization() {
	if (route.query.from === 'knowledgeGraph') {
		const knowledgeGraphReturnParams = JSON.parse(
			sessionStorage.getItem('knowledgeGraphReturnParams') || '{}'
		);
		sessionStorage.removeItem('knowledgeGraphReturnParams');
		if (knowledgeGraphReturnParams.businessType === 'course') {
			router.push({
				name: 'CourseKnowledgeGraph',
				query: {
					courseCode: knowledgeGraphReturnParams.businessCode
				}
			});
		} else {
			router.push({
				name: 'LessonAnalysisDetails',
				query: {
					lessonCode: knowledgeGraphReturnParams.businessCode,
					tab: '2'
				}
			});
		}
	} else {
		router.push({
			name: 'OverAll'
		});
	}
}
</script>

<style scoped lang="scss">
#AnalysisManage {
	width: 100%;
	height: 100%;
	background: url('@/assets/images/bg.png') no-repeat center top;
	background-size: 100% 100%;
}

.analysis-manage-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 7.2rem;
	padding-left: 3rem;
	padding-right: 3rem;
	background: url('@/assets/images/header-bg.png') no-repeat center top/100% 100%;
	.analysis-manage-header-title {
		font-family: 'douyinbold';
		font-size: $font-size-large-5;
		color: #fff;
		img {
			margin-right: 1rem;
		}
	}
	.analysis-manage-header-back {
		display: flex;
		align-items: center;
		cursor: pointer;
		span {
			font-size: $font-size-large-1;
			color: #fff;
		}
		.el-icon {
			font-size: $font-size-large-1;
			color: #fff;
		}
		&:hover {
			span {
				text-decoration: underline;
			}
		}
	}
}
.analysis-manage-container {
	display: flex;
	height: calc(100% - 7.2rem);
	padding: 2rem 2rem 2rem 2rem;
}
.analysis-manage-menu {
	height: 100%;
	width: 20rem;
	min-width: 20rem;
	margin-right: 2rem;
	padding: 1rem;
	background-color: #fff;
	border-radius: 0.5rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	overflow-y: auto;
	.el-menu {
		border-right: none;
	}
	.el-menu-item {
		padding-left: 2rem !important;
		margin-bottom: 1rem !important;
		height: 5.6rem;
		line-height: 5.6rem;
		font-size: $font-size-large-2;
		color: $text-color-regular;
		border-radius: 0.6rem;
		&:last-child {
			margin-bottom: 0;
		}
	}
	.el-menu-item.is-active {
		background: color.adjust($color-brand, $lightness: 12%);
		color: #fff;
		border-radius: 6px;
	}
	.el-sub-menu {
		:deep(.el-sub-menu__title) {
			padding-left: 2rem;
			padding-right: 4.4rem;
			height: 5.6rem;
			line-height: 5.6rem;
			font-size: $font-size-large-2;
		}
		:deep(.el-menu) {
			margin-left: 2rem;
		}
		.el-menu-item {
			font-size: $font-size-large-1;
			padding-left: 2rem;
		}
		:deep(.el-sub-menu__icon-arrow) {
			margin-top: -0.6rem;
			right: 2rem;
			font-size: 1.2rem;
		}
	}
}
.child-analysis-content {
	flex: 1;
	min-width: 0;
	height: 100%;
	background-color: #fff;
	overflow-x: auto;

	.child-analysis-scroll-wrapper {
		min-width: calc(1366px - 20rem - 2rem * 3);
		height: 100%;
	}
}
</style>
